<template>
  <div class="area-table">
    <div class="area-table-title-row">
      <span class="table-title">{{ title }}</span>
      <div v-if="!disabled">
        <!--        <el-button type="primary">预览</el-button>-->
        <el-button type="primary" @click="handleAdd()">新增</el-button>
      </div>
    </div>
    <el-table :data="tableData" class="project-application-table">
      <el-table-column label="序号" prop="index" min-width="30">
        <template v-slot="{$index}">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="区域名称" prop="areaName" min-width="100"/>
      <el-table-column label="施工内容" prop="constructionContent" min-width="100"/>
      <el-table-column label="特种作业内容" prop="specialJobContent" min-width="100"/>
<!--      <el-table-column label="施工区域" prop="areaName" show-overflow-tooltip min-width="100">-->
<!--        <template v-slot="{row}">-->
<!--          {{row.areaName}}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" width="120">
        <template v-slot="{row}">
          <template v-if="pageType === ProjectFormType.ADD || pageType === ProjectFormType.EDIT">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
          </template>
          <el-button v-else type="text" @click="handleView(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddMapArea ref="addMapAreaRef" :location="location"/>

    <edit-dialog tilte="删除" :centerDialogVisible="delVisible" width="300" @Cancel="delVisible = false" @Submit="confirmDelete">
      <template #content>
        <div class="before-create-dialog">
          是否删除该施工区域？
        </div>
      </template>
    </edit-dialog>
  </div>
</template>

<script>
import AddMapArea from "@/views/construction/project-application/componens/AddMapArea";
import EditDialog from "@/components/editDialog/index.vue";
import {ProjectFormType} from "@/views/construction/project-daily/projectUtil";

export default {
  name: "AreaTable",
  components: {AddMapArea, EditDialog},
  inject: ['pageType'],
  props: {
    title: {
      type: String
    },
    tableData: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
    },
    location: {
      type: String,
    }
  },
  data() {
    return {
      delVisible: false,
      ProjectFormType
    }
  },
  methods: {
    specialTypeFormatter(row) {
      if (!row.specialJobContent || !row.specialJobContent.length) return
      return row.specialJobContent.map(val => this.options.projectWorkTypeOptions(val)).join()
    },
    handleAdd() {
      this.$refs.addMapAreaRef.open({
        resolve: (item) => {
          if (item) {
            this.tableData.push(item)
          }
        }
      })
    },
    handleEdit(row) {
      this.$refs.addMapAreaRef.open({
        row,
        resolve: (item) => {
          Object.assign(row, item)
        }
      })
    },
    handleView(row) {
      this.$refs.addMapAreaRef.open({
        row,
      })
    },
    handleDelete(row) {
      this.delVisible = true
      this.row = row
    },
    confirmDelete() {
      let index = this.tableData.findIndex(item => item === this.row)
      this.tableData.splice(index, 1)
      this.delVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.area-table {
  padding-left: 50px;
  margin-bottom: 20px;

  .area-table-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .table-title {
      font-size: 14px;
    }
  }
}
</style>
